/* * @Description: * @Author: TM_FULLNAME * @version: * @Date: 2024-11-04
19:35:13 * @LastEditors: TM_FULLNAME * @LastEditTime: 2024-11-04 19:35:13 */
<template>
    <video-player
        :poster="poster"
        crossorigin="anonymous"
        :controls="true"
        :loop="true"
        :volume="0.6"
        :techOrder="['html5', 'flvjs']"
        autoplay="true"
        width="500px"
        height="300px"
        @mounted="handleMounted"
    />
</template>

<script setup>
import { VideoPlayer } from "@videojs-player/vue";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import { ref } from "vue";

const props = defineProps({
    src: {
        type: String,
        default:
            "http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8",
    },
    videoType: {
        type: String,
        default: "flv",
    },
});
const poster = ref("/src/assets/uiResources/subway.jpeg");

const handleMounted = ({ player }) => {
    if (props.videoType === "hls") {
        console.log("HLS Live player mounted", player);
        player.src(props.src);
    } else if (props.videoType === "flv") {
        // flv.js runs only in the browser environment and does an asynchronous processing for SSR prerender.
        console.log("flv");
        import("/src/cesiumTools/flvjs-tech.js").then(({ FlvJsTech }) => {
            try {
                console.log(FlvJsTech);
                videojs.registerTech("Flvjs", FlvJsTech);
                player.src(props.src);
            } catch (error) {
                console.error(error);
            }
        });
    }
};
</script>
<style scoped lang="less"></style>
